﻿<template>
  <div v-loading = 'loading'>
    <template v-if = 'formData'>
      <template v-for = "item in formData.list">
        <!-- 栅格布局时 -->
        <template v-if = "item.type == 'grid'">
          <el-row :key = "item.key" type = "flex" :gutter = "item.options.gutter ? item.options.gutter : 0"
          :justify = "item.options.justify" :align = "item.options.align">
            <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span">
              <template v-for = "citem in col.list">
                <BiDashboardMenuItem :element = 'citem' :key = 'citem.key'></BiDashboardMenuItem>
              </template>
            </el-col>
          </el-row>
        </template>
        <!-- tabs标签页时 -->
        <template v-else-if = "item.type == 'tabs'">
          <el-tabs :type = "item.options.tabType" :stretch = "item.options.stretch" :key = "item.key">
            <el-tab-pane v-for = "(tabItem, tabIndex) in item.tabList" :key = "tabIndex" :label = "tabItem.label">
              <template v-for = "el in tabItem.list">
                <!-- 为栅格布局时 -->
                <template v-if = "el.type == 'grid'">
                  <el-row :key = "el.key" type = "flex" :gutter = "el.options.gutter ? el.options.gutter : 0"
                  :justify = "el.options.justify" :align = "el.options.align">
                    <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span">
                      <template v-for = "citem in col.list" >
                        <BiDashboardMenuItem :element = 'citem' :key = 'citem.key'></BiDashboardMenuItem>
                      </template>
                    </el-col>
                  </el-row>
                </template>
                <!-- 其它组件 -->
                <template v-else>
                  <BiDashboardMenuItem :element = 'el' :key = 'el.key'></BiDashboardMenuItem>
                </template>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <BiDashboardMenuItem :element = 'item' :key = 'item.key'></BiDashboardMenuItem>
        </template>
      </template>
    </template>
  </div>
</template>

<script src = './biDashboardMenu.js'></script>
